<template>
	<view class="bBtn_p_b140">
		<view class="contina w m_t_10">
			<view class="card">
				<u--form labelPosition="left" :model="form" labelWidth="125" ref="form1" borderBottom
					:labelStyle="labelStyle">
					<u-form-item label="证书名称" prop="form.certification_type_id" borderBottom @click="show2=true">
						<u--input v-model="form.certification_type.name"
							placeholder-style="text-align: right;color:#999999" disabledColor="#ffffff"
							placeholder="请选择证书名称" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="网站名称" prop="form.name" borderBottom ref="item1">
						<u--input v-model="form.name" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入网站名称"></u--input>
					</u-form-item>
					<u-form-item label="查询网址" prop="form.url" borderBottom ref="item1">
						<u--input v-model="form.url" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入查询网址"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<flooterCom>
			<template #btn>
				<view class="flex_a_c" style="justify-content: space-around;">
					<view class="cale btns" @click="back">取消</view>
					<view class="save btns" @click="submit">保存</view>
				</view>
			</template>
		</flooterCom>
		<u-picker :show="show2" :columns="actions" @cancel="show2=false" @confirm="selectAction"
			keyName="name"></u-picker>
	</view>
</template>

<script>
	import flooterCom from "@/compoment/flooterCom.vue"
	export default {
		data() {
			return {
				labelStyle: {
					display: 'flex',
					justifyContent: 'spaceBetween'
				},
				show2: false,
				actions: [],
				form: {
					certification_type_id: '',
					name: '',
					url: '',
					certification_type: {
						name: ''
					},
				},
			}
		},
		components: {
			flooterCom
		},
		onLoad(option) {
			this.edit = option.edit
			if (this.edit == 1) {
				this.getDetail(option.id)
			}
			uni.setNavigationBarTitle({
				title: this.edit == 1 ? '编辑证书检查' : '新增证书检查'
			})
		},
		created() {
			this.$api.homeApi.getCertificationType().then(res => {
				this.actions.push(res.list)
			})
		},
		methods: {
			async getDetail(id) {
				this.form = await this.$api.staffCertificateCheckApi.detail({
					id: id
				})
			},
			selectAction(e) {
				let v = e.value[0]
				this.form.certification_type_id = v.id
				this.form.certification_type.name = v.name
				this.show2 = false
			},
			back() {
				uni.navigateBack()
			},
			async submit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				try {
					if (this.edit == 1) {
						await this.$api.staffCertificateCheckApi.update(this.form)
					} else {
						await this.$api.staffCertificateCheckApi.add(this.form)
					}
					this.$fun.tipBack('保存成功')
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
		},
	}
</script>

<style lang="scss">
	.contina {
		::v-deep .u-form-item__body {
			padding: 30rpx 0 !important;

			.u-form-item__body__right__content__slot {
				display: flex;
				align-items: flex-end;
			}

			text-align: right;

			.par_upload {
				width: 100rpx;
				height: 100rpx;

				.u-upload__button {
					width: 100rpx !important;
					height: 100rpx !important;
				}
			}
		}

		::v-deep .u-form-item__body__left__content__label {
			justify-content: space-between !important;
			width: 100%;
		}
	}

	.btns {
		width: 330rpx;
		height: 90rpx;
		border-radius: 10px 10px 10px 10px;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10px 10px 10px 10px;
	}

	.cale {
		color: #FF0000;
		border: 1px solid #F07878;
	}

	.save {
		color: #fff;
		background-color: #0074FF;
	}
</style>